<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1, user-scalable=no" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/app/css/media.css"/>
    <link rel="stylesheet" type="text/css" href="/app/css/common.css"/>

    <title>云备份</title>
    <link href="/app/css/mui.picker.css" rel="stylesheet" />
    <link href="/app/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/app/css/index.css"/>
    <script src="//do.yunzhijia.com/pub/js/qingjs.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/app/css/index.css"/>
    <script src="/app/js/jquery-3.0.0.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

</head>
<body style="background: #eaeff3;>
<div class="main_div">
<div class="main_body">

    <p class="topTip_p">客户经理折扣为6折。</p>
    <div class="listing">
        <div class="items" id="sliderone">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/app/image/yunbeifen.png" width="22px"; height="22px">
                </i></div>
                <h4 class="title">备份容量</h4>
                <ul class="config2_ul">
                    <li class="zhu">
                        <div class=" left huahua" style="width: 56%;">
                            <!--滚动条框-->
                            <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10000" data-slider-step="100" data-slider-value="0" value="100"/>
                        </div>
                        <div class="_config_div wid35 brand_num_text ">
                            <div class="minus"><i><img src="/app/image/Group_MINUS.png" class="img_class"></i>
                            </div>
                            <input type="tel" id="testNum" pattern="[0-9]*"  maxlength="3" class="brand_num input_bg_max testNum" value="100"/>
                            <div class="plus">
                                <i>
                                    <img src="/app/image/Group_PLUS.png" class="img_class">
                                </i></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li class="brand_num  brand brand_tip_one"></li>
                </ul>
                <p class="price_p right brand_price" id="brand_price"></p>
            </div>
        </div>
        <div class="items" id="slidertwo">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/app/image/store.png" width="20px" ;="" height="25px">
                </i></div>
                <h4 class="title">备份高级服务</h4>
                <ul class="config2_ul">
                    <li class="zhu">
                        <div class=" left huahua" style="width: 56%;">
                            <!--滚动条框-->
                            <input class="ex2Slider" id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="1000" data-slider-step="10" data-slider-value="0" value="1"/>
                        </div>
                        <div class="_config_div wid35 brand_num_text ">
                            <div class="minus" id="minus_ren"><i><img src="/app/image/Group_MINUS.png" class="img_class"></i>
                            </div>
                            <input type="tel" id="testNum_ren" pattern="[0-9]*"  maxlength="3" class="brand_num input_bg testNum_ren" value="0"/>
                            <div class="plus" id="plus_ren">
                                <i>
                                    <img src="/app/image/Group_PLUS.png" class="img_class">
                                </i></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li class="brand_ren brand_tip_two"></li>
                </ul>
                <p class="price_p right price_ren" id="price_ren"></p>
            </div>
        </div>
    </div>
</div>
<#include "foot.ftl">
<#--//九个计算值
        //CPU-->
<input type="hidden" id="total_cpu_t" name="total_cpu_t" value="438">
<input type="hidden" id="valueOfYear" name="valueOfYear" value="1425">
<input type="hidden" id="samplePrice" name="samplePrice" value="125">


<#--//存储-->
<input type="hidden" id="total_stat_t" name="total_stat_t" value="0">
<input type="hidden" id="total_stat_a" name="total_stat_a" value="0">
<input type="hidden" id="total_stat_d" name="total_stat_d" value="0">

<#--//带宽-->
<input hidden id="price_two" name="price_two" value="0">
<input type="hidden" id="tx_sata_tag" name="tx_sata_tag" value="0">

<input type="hidden" name="flag" id="flag" value="0">
<input type="hidden" name="flagNum" id="flagNum" value="0">
<input type="hidden" name="flag_die" id="flag_die" value="1">
<input type="hidden" name="flag_die_flag" id="flag_die_flag" value="1">
<input type="hidden" name="title" id="title" value="${title}">
<input type="hidden" name="openId" id="openId" value="${openId}">
</div>
<script src="/app/js/mui.min.js"></script>
<script src="/app/js/mui.poppicker.js"></script>
<script src="/app/js/mui.picker.min.js"></script>
<script src="/app/js/yun_title.js"></script>
<script>

    $("#ali_price").text("无此规格");
    $("#tx_price").text("无此规格");
    function brand_price(num) {
        $('#brand_price').innerHTML=('￥'+parseFloat(num*400).toFixed(2));

    };
    function ren_price(num) {
        $('#price_ren').innerHTML=('￥'+parseFloat(num*3000).toFixed(2));

    };
    var sliders = new Slider('#ex1', {
        formatter: function(value) {
            $('.brand_num').text(value+"GB");
            $('.input_bg_max').text(value+"GB");
            $('.input_bg_max').val(value);
            $("#ex1").attr("value",value);
            $('.brand_price').text("￥"+value*400);

            brand_price(value);
            getAllPrice();
        }
    });


    var sliders2 = new Slider('#ex2', {
        formatter: function(value) {

            $('.brand_ren').text(value+"人");
            $('.input_bg').text(value+"人");
            $('.input_bg').val(value);
            $("#ex2").attr("value",value);
            $('.price_ren').text("￥"+value*3000);

            ren_price(value);
            getAllPrice();
        }
    });



    function  getAllPrice() {
        var rongliang=$('#brand_price').text();
        var rongPrice=parseFloat(rongliang.substring(1,rongliang.length));
        var rengong=$('#price_ren').text();
        var renPrice=parseFloat(rengong.substring(1,rengong.length));
       /* $("#cpu_price").text("￥"+(price*count).toFixed(2));*/
        $("#allprice").text("￥"+(rongPrice+renPrice).toFixed(2));
        $(".check_right_ul").css("margin-right","0px")
    };
    $('#slidertwo .minus').click(function () {
        var num =parseInt($('.input_bg').val());
        if(num<=1){
            num=1;
            ren_price(num);
            $('.input_bg').val(0);
            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();

            sliders2.setValue(num);

        }
        else {
            num=num-1;
            ren_price(num);

            $('.input_bg').val(num);

            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();
            /*$("#ex2").attr("aria-valuenow",num);
            $("#ex2").attr("data-value",num);
            $("#ex2").attr("value",num);
            $("#ex2").val(num);
            $("#ex2").attr("value",num);
            var shu=num/1000*100;
            var shu1=100-shu;
            $("#ex2").find(".top").css("left",shu+"%");
            $("#ex2").find(".round").css("left",shu+"%");
            $("#ex2").find(".slider-selection").css("width",shu+"%");
            $("#ex2").find(".slider-track-high").css("width",shu1+"%");*/
            sliders2.setValue(num);

        }
    })
    /*带宽值得文本框*/
    $('#sliderone  .testNum_ren').on("blur",function (event) {
        var flag=document.getElementById('flag');
        var  flagNum=document.getElementById('flagNum');
        var flag_die=document.getElementById('flag_die');
        var flag_die_flag=document.getElementById('flag_die_flag');
        if(flag_die_flag.value==1){
            flag_die.value=0;
        }
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=1;
            flag.value=1;
            flagNum.value=num;
        }
        if(num<=0||num==""){
            num=1;
            flag.value=1;
            flagNum.value=num;
            ren_price(num);
            $('.input_bg').val(num);
            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();
            //计算滚动条
            /*$(".round").attr("aria-valuenow",num);
            $("#ex2").attr("data-value",num);
            $("#ex2").val(num);
            $("#ex2").attr("value",num);
            var shu=num/1000*100;
            var shu1=100-shu;
            $(".top").css("left",shu+"%");
            $(".round").css("left",shu+"%");
            $(".slider-selection").css("width",shu+"%");
            $(".slider-track-high").css("width",shu1+"%");*/
            sliders2.setValue(num);
            /*test(num);*/
        }
        else if(num>=1000){
            num=1000;
            flag.value=1;
            ren_price(num);
            flagNum.value=num;
            $('.input_bg').val(num);
            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();
            //计算滚动条
            sliders2.setValue(num);
            /*test(num);*/
        }
        else {
            if(num<1){
                num=1;
                flag.value=1;
                flagNum.value=num;
            }
            ren_price(num);
            $('.input_bg').val(num);
            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();
            //计算滚动条
            sliders2.setValue(num);
        }

    });
    $('#slidertwo .plus').click(function () {
        var num = parseInt($('.input_bg').val());
        if(num>=1000){
            num=1000;
            ren_price(num);
            sliders2.setValue(num);
            $('.input_bg').val(num);

            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();
            //计算滚动条
            /*$(".ex2Slider").find(".round").attr("aria-valuenow",num);
            $("#ex2").attr("data-value",num);
            $("#ex2").attr("value",num);
            var shu=num/1000*100;
            var shu1=100-shu;
            $("#ex2Slider").find(".top").css("left",shu+"%");
            $("#ex2Slider").find(".round").css("left",shu+"%");
            $("#ex2Slider").find(".slider-selection").css("width",shu+"%");
            $("#ex2Slider").find(".slider-track-high").css("width",shu1+"%");*/

        }
        else {
            num=num+1;
            ren_price(num);
            $('.input_bg').val(num);
            sliders2.setValue(num);
            $('.brand_ren').text(num+"人");
            $('.price_ren').text("￥"+num*3000);
            getAllPrice();
            //计算滚动条

            /*$(".ex2Slider").find(".round").attr("aria-valuenow",num);
            /!*$("#ex2").attr("data-value",num);
            $("#ex2").attr("value",num);*!/
            var shu=num/1000*100;
            var shu1=100-shu;
            $(".ex2Slider").find(".top").css("left",shu+"%");
            $(".ex2Slider").find(".round").css("left",shu+"%");
            $(".ex2Slider").find(".slider-selection").css("width",shu+"%");
            $(".ex2Slider").find(".slider-track-high").css("width",shu1+"%");*/
        }
    });



    $('#sliderone  .minus').click(function () {
        var num =parseInt($('.input_bg_max').val());
        if(num<100){
            num=100;
            brand_price(num);
            $('.input_bg_max').val(0);
            $('.brand_num').text(num+"GB");
            $('.brand_price').text("￥"+num*40);
            getAllPrice();
            /*$(".round").attr("aria-valuenow",num);
            $("#ex1").attr("data-value",num);
            $("#ex1").val(num);
            $("#ex1").attr("value",num);
            var shu=num/10000*100;
            var shu1=100-shu;
            $(".top").css("left",shu+"%");
            $(".round").css("left",shu+"%");
            $(".slider-selection").css("width",shu+"%");
            $(".slider-track-high").css("width",shu1+"%");*/
            sliders.setValue(num);

        }
        else {
            num=num-100;
            brand_price(num);

            $('.input_bg_max').val(num);

            $('.brand_num').text(num+"GB");
            $('.brand_price').text("￥"+num*40);
            getAllPrice();
            /*$(".round").attr("aria-valuenow",num);
            $("#ex1").attr("data-value",num);
            $("#ex1").attr("value",num);
            $("#ex1").val(num);
            $("#ex1").attr("value",num);
            var shu=num/10000*100;
            var shu1=100-shu;
            $(".top").css("left",shu+"%");
            $(".round").css("left",shu+"%");
            $(".slider-selection").css("width",shu+"%");
            $(".slider-track-high").css("width",shu1+"%");*/
            sliders.setValue(num);

        }
    })
    /*带宽值得文本框*/
    $('#sliderone  .testNum').on("blur",function (event) {
        var flag=document.getElementById('flag');
        var  flagNum=document.getElementById('flagNum');
        var flag_die=document.getElementById('flag_die');
        var flag_die_flag=document.getElementById('flag_die_flag');
        if(flag_die_flag.value==1){
            flag_die.value=0;
        }
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;
            flag.value=1;
            flagNum.value=num;
        }
        if(num<=0||num==""){
            num=0;
            flag.value=1;
            flagNum.value=num;
            brand_price(num);
            $('.input_bg_max').val(num);
            $('.brand_num').text(num+"GB");
            $('.brand_price').text("￥"+num*400);
            getAllPrice();
            //计算滚动条
            sliders.setValue(num);
            /*test(num);*/
        }
        else if(num>=10000){
            num=10000;
            flag.value=1;
            brand_price(num);
            flagNum.value=num;
            $('.input_bg_max').val(num);
            $('.brand_num').text(num+"MB");
            $('.brand_price').text("￥"+num*400);
            getAllPrice();
            //计算滚动条
            sliders.setValue(num);
        }
        else {
            if(num<100){
                num=100;
                flag.value=1;
                flagNum.value=num;
            }
            /*else{
                var num_mo=num%10;
                if(num_mo<5){
                    num=Math.floor(num/10)*10;
                    flag.value=1;
                    flagNum.value=num;
                }
                else {
                    num=Math.ceil(num/10)*10;
                    flag.value=1;
                    flagNum.value=num;
                }
            }*/

            brand_price(num);
            $('.input_bg_max').val(num);
            $('.brand_num').text(num+"GB");
            $('.brand_price').text("￥"+num*400);
            getAllPrice();
            //计算滚动条
            sliders.setValue(num);
            /*test(num);*/
            return true;
        }

    });
    $('#sliderone .plus').click(function () {
        var num = parseInt($('.input_bg_max').val());
        if(num>=10000){
            num=10000;
            brand_price(num);
            $('.input_bg_max').val(num);

            $('.brand_num').text(num+"GB");
            $('.brand_price').text("￥"+num*400);
            getAllPrice();
            //计算滚动条
            sliders.setValue(num);
            /*$(".round").attr("aria-valuenow",num);
            $("#ex1").attr("data-value",num);
            $("#ex1").attr("value",num);
            var shu=num/10000*100;
            var shu1=100-shu;
            $(".top").css("left",shu+"%");
            $(".round").css("left",shu+"%");
            $(".slider-selection").css("width",shu+"%");
            $(".slider-track-high").css("width",shu1+"%");*/
        }
        else {
            num=num+100;
            sliders.setValue(num);
            brand_price(num);
            $('.input_bg_max').val(num);

            $('.brand_num').text(num+"GB");
            $('.brand_price').text("￥"+num*400);
            getAllPrice();
            //计算滚动条
            sliders.setValue(num);
//            $(".round").attr("aria-valuenow",num);
//            $("#ex1").attr("data-value",num);
//            $("#ex1").attr("value",num);
//            var shu=num/10000*100;
//            var shu1=100-shu;
//            $(".top").css("left",shu+"%");
//            $(".round").css("left",shu+"%");
//            $(".slider-selection").css("width",shu+"%");
//            $(".slider-track-high").css("width",shu1+"%");
        }
    });


    function count(num) {
        var samplePrice = document.getElementById('samplePrice');
        var valueOfYear = document.getElementById('valueOfYear');
        var priceOfMon=parseFloat(samplePrice.value);
        var priceOfYear = parseFloat(valueOfYear.value);
        if(num<12){
            $("#cpu_price").text("￥"+(num*priceOfMon).toFixed(2));
            $("#allprice").text("￥"+(num*priceOfMon).toFixed(2));
        }
        if(num>12){
            var mon=0;
            var year=0;

            mon=parseFloat((num%12)*priceOfMon);
            year=parseFloat(parseInt((num/12))*priceOfYear);
            $("#cpu_price").text("￥"+(mon+year).toFixed(2));
            $("#allprice").text("￥"+(mon+year).toFixed(2));
        }
        if(num%12==0){
            var yearNum=parseFloat(num/12);
            $("#cpu_price").text("￥"+(yearNum*priceOfYear).toFixed(2));
            $("#allprice").text("￥"+(yearNum*priceOfYear).toFixed(2));
        }
        var type=$('#vpnCount').text();
        if(type==5||type==10||type==50){
            var total_ali_price=parseFloat($('#total_cpu_t').val());
            $("#ali_price").text("￥"+(total_ali_price*num).toFixed(2));
        }
        else {
            $("#ali_price").text("无此规格");
        }
    }

    $('.checkInfo_right').click(function () {
        var openId=$('#openId').val();
        //VCPU
        var shiLiPz="SSL_VPN";
        var brandNum=$('.brand_tip_one').text();
        var shiJian=$('.brand_tip_two').text();


        //三个价格
        var aliprice=$('#ali_price').text();
        var txprice=$('#tx_price').text();
        var allprice=$('#allprice').text();
        if(aliprice=="无此规格"){
            aliprice=0;
        }
        else {
            aliprice=aliprice.substring(1);
        }
        if(txprice=="无此规格"){
            txprice=0;
        }
        else {
            txprice=txprice.substring(1);
        }
        allprice=allprice.substring(1);

        var data1 = {
            cpuAndMem:brandNum,
            meMory:'',
            stat:shiJian,
            brandNum:'',

            ali_price:aliprice,
            tx_price:txprice,
            all_price:allprice,
            productTypeId:11,//云备份
            productName:'云备份',
            oneKey:'备份容量',
            twoKey:'备份高级服务',
            threeKey:'',
            disCount:'1',
            oneImage:'list_icon6',
            twoImage:'list_icon7',

            threeImage:'black'
        }
        $.post("/takeList/"+openId+"/",data1,function(data){
            if(data.type=="success"){
                layer.msg(data.msg);
            }
        });
    });



</script>


</body>

</html>
